<script setup lang="ts">
import { ref } from 'vue'
import type { Dayjs } from 'dayjs';
const value1 = ref<Dayjs>();
const value2 = ref('lucy');

defineProps(['msg', 'num'])

const count = ref(0)
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>{{ num }}</p>

    <div class="card">
      <a-button @click="count++">count is {{ count }}</a-button>
    </div>

    <a-row>
      <a-space wrap>
        <a-button type="primary">Primary Button</a-button>
        <a-button>Default Button</a-button>
        <a-button type="dashed">Dashed Button</a-button>
        <a-button type="text">Text Button</a-button>
        <a-button type="link">Link Button</a-button>
      </a-space>
    </a-row>

    <a-row>
      <a-space direction="vertical" :size="12">
        <a-date-picker v-model:value="value1" />
      </a-space>
    </a-row>

    <a-row>
      <a-select
          ref="select"
          v-model:value="value2"
          style="width: 120px"
      >
        <a-select-option value="jack">Jack</a-select-option>
        <a-select-option value="lucy">Lucy</a-select-option>
        <a-select-option value="disabled" disabled>Disabled</a-select-option>
        <a-select-option value="Yiminghe">yiminghe</a-select-option>
      </a-select>
    </a-row>
  </div>
</template>

<style scoped>

</style>
